<style>
.vue-code-mirror__con {
  max-height: 50em;
  overflow: auto;
}
</style>

<template>
  <div>
    <z-space vertical>

      <DemoFormControl @submit="handleFormSubmit"></DemoFormControl>

      <template v-if="state.reload">
        <fox-form-template
            v-if="tool.state.inited"
            :properties="tool.properties"
           @form-submit="tool.onSubmit"
            @form-ready="tool.onReady"
            :form-config="{labelInline: true}"
        ></fox-form-template>

        <div style="height: 120px"></div>

        <h3>表单数据结构</h3>
        <vue-code-mirror :js="doc.js"></vue-code-mirror>
      </template>

      <RemoteFileViewer file="example/views/form/arr.vue"></RemoteFileViewer>

    </z-space>
  </div>
</template>

<script>
import FoxFormTemplate from "@/zprojects/components/FoxForm/FoxFormTemplate";
import RemoteFileViewer from "@example/plugins/example/components/RemoteFileViewer";
import VueCodeMirror from "@example/components/VueCodeMirror";
import {createEasyForm} from "../../../babel-static/hooks";
import DemoFormControl from "@example/views/form/components/DemoFormControl";


export default {
  components: {DemoFormControl, VueCodeMirror, RemoteFileViewer, FoxFormTemplate},
  setup() {
    let tool = createEasyForm({
      handleProperties(properties) {
        // console.log('handleProperties', properties)
        // return layoutGrid([
        //   {start: 0, end: 1, gutter: 20, defaultSpan: 8 },
        // ],properties)
        return properties
      }
    });

    let state = ZY.T.state({
      reload: false
    });

    let doc = {
      js: `${ZY.JSON5.stringify(tool.properties, null, 2)}`
    }

    async function handleFormSubmit(form) {
      state.reload = false
      let model = form.getModel()

      tool.setOption(model.option)
      await tool.init(model.url, {
      });

      state.reload = true;

      // await tool.load(model.option.detailUrl);

      doc.js = `${ZY.JSON5.stringify(tool.properties, null, 2)}`
    }


    return {
      tool,
      handleFormSubmit,
      state,
      doc
    }
  }
}
</script>
